<template>
  <section id="active-members" class="py-20 px-4 md:px-8 bg-neutral-900 reveal-section">
    <div class="container mx-auto">
      <h2 class="text-[clamp(1.8rem,4vw,2.5rem)] font-bold mb-12 text-center">
        <span class="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400">年度活跃成员</span>
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
        <!-- 成员卡片 1 -->
        <div
          ref="memberCard1"
          class="bg-neutral-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-white/5 card-hover member-card"
        >
          <div class="h-3 bg-gradient-to-r from-yellow-500 to-yellow-300"></div>
          <div class="p-6">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-blue-400 shadow-lg">
                <img src="https://photo.ruojy.top/bubu.png" alt="小宇在折腾" class="w-full h-full object-cover" />
              </div>
              <div>
                <h3 class="text-xl font-bold">小宇在折腾</h3>
                <p class="text-yellow-300 text-sm">软件全栈开发</p>
              </div>
            </div>

            <div class="space-y-3 text-sm">
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群聊等级</span>
                <span class="font-semibold">100</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">评价</span>
                <span class="font-semibold">努力、动手能力强</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群昵称</span>
                <span class="font-semibold">小宇在折腾</span>
              </div>
            </div>

            <div class="mt-4 pt-4 border-t border-white/10">
              <div class="flex justify-between text-xs text-neutral-500">
                <span>最活跃时间: 全天</span>
                <span class="bg-yellow-500/20 text-yellow-300 px-2 py-1 rounded-full">群主</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 成员卡片 2 -->
        <div
          ref="memberCard2"
          class="bg-neutral-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-white/5 card-hover member-card"
        >
          <div class="h-3 bg-gradient-to-r from-green-500 to-teal-500"></div>
          <div class="p-6">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-green-400 shadow-lg">
                <img src="https://q.qlogo.cn/headimg_dl?dst_uin=911934538&spec=640&img_type=jpg" alt="杜绝话痨～" class="w-full h-full object-cover" />
              </div>
              <div>
                <h3 class="text-xl font-bold">杜绝话痨～</h3>
                <p class="text-green-300 text-sm">C++大佬</p>
              </div>
            </div>

            <div class="space-y-3 text-sm">
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群聊等级</span>
                <span class="font-semibold">100</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">评价</span>
                <span class="font-semibold">低调的朔爷</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群昵称</span>
                <span class="font-semibold">弔图带师-朔爷</span>
              </div>
            </div>

            <div class="mt-4 pt-4 border-t border-white/10">
              <div class="flex justify-between text-xs text-neutral-500">
                <span>最活跃时间: 全天</span>
                <span class="bg-green-500/20 text-green-300 px-2 py-1 rounded-full">管理员</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 成员卡片 3 -->
        <div
          ref="memberCard3"
          class="bg-neutral-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-white/5 card-hover member-card"
        >
          <div class="h-3 bg-gradient-to-r from-purple-500 to-pink-500"></div>
          <div class="p-6">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-purple-400 shadow-lg">
                <img src="https://q.qlogo.cn/headimg_dl?dst_uin=2777136265&spec=640&img_type=jpg" alt="王五" class="w-full h-full object-cover" />
              </div>
              <div>
                <h3 class="text-xl font-bold">飞翔的企鹅</h3>
                <p class="text-purple-300 text-sm">头号活跃玩家</p>
              </div>
            </div>

            <div class="space-y-3 text-sm">
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群聊等级</span>
                <span class="font-semibold">100</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">评价</span>
                <span class="font-semibold">全村的希望</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群昵称</span>
                <span class="font-semibold">爱玩追追的喜羊羊</span>
              </div>
            </div>

            <div class="mt-4 pt-4 border-t border-white/10">
              <div class="flex justify-between text-xs text-neutral-500">
                <span>最活跃时间: 全天</span>
                <span class="bg-purple-500/20 text-purple-300 px-2 py-1 rounded-full">管理员</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 成员卡片 4 -->
        <div
          ref="memberCard4"
          class="bg-neutral-800/50 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-white/5 card-hover member-card"
        >
          <div class="h-3 bg-gradient-to-r from-purple-500 to-blue-500"></div>
          <div class="p-6">
            <div class="flex items-center gap-4 mb-4">
              <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-yellow-400 shadow-lg">
                <img src="https://q.qlogo.cn/headimg_dl?dst_uin=1941976871&spec=640&img_type=jpg" alt="-" class="w-full h-full object-cover" />
              </div>
              <div>
                <h3 class="text-xl font-bold">-</h3>
                <p class="text-blue-300 text-sm">开心果</p>
              </div>
            </div>

            <div class="space-y-3 text-sm">
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群聊等级</span>
                <span class="font-semibold">80</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">评价</span>
                <span class="font-semibold">开心果</span>
              </div>
              <div class="flex justify-between items-center">
                <span class="text-neutral-400">群昵称</span>
                <span class="font-semibold">-</span>
              </div>
            </div>

            <div class="mt-4 pt-4 border-t border-white/10">
              <div class="flex justify-between text-xs text-neutral-500">
                <span>最活跃时间: 全天</span>
                <span class="bg-purple-500/20 text-blue-300 px-2 py-1 rounded-full">管理员</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-12 text-center">
        <button class="px-8 py-3 bg-neutral-800/50 hover:bg-neutral-700/50 rounded-full transition-all duration-300 backdrop-blur-sm border border-white/10">
          查看更多
        </button>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

// 为每个卡片创建ref
const memberCard1 = ref(null)
const memberCard2 = ref(null)
const memberCard3 = ref(null)
const memberCard4 = ref(null)

// 存储所有卡片ref
const memberCards = ref([])

onMounted(() => {
  nextTick(() => {
    // 收集所有卡片ref
    memberCards.value = [
      memberCard1.value,
      memberCard2.value,
      memberCard3.value,
      memberCard4.value
    ].filter(Boolean) // 过滤掉null

    if (memberCards.value.length === 0) return

    // 配置Intersection Observer
    const observerOptions = {
      root: null,
      rootMargin: '0px 0px -20% 0px', // 当卡片顶部进入视口20%时触发
      threshold: 0.1
    }

    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry, index) => {
        if (entry.isIntersecting) {
          // 为每个卡片设置不同的动画延迟
          const delay = index * 200 // 每个卡片延迟200ms

          setTimeout(() => {
            entry.target.classList.add('card-visible')
            observer.unobserve(entry.target)
          }, delay)
        }
      })
    }, observerOptions)

    // 开始观察所有卡片
    memberCards.value.forEach(card => {
      observer.observe(card)
    })
  })
})
</script>

<style scoped>
/* 卡片初始样式 - 隐藏并定位在下方 */
.member-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s cubic-bezier(0.5, 0, 0, 1),
  transform 0.6s cubic-bezier(0.5, 0, 0, 1);
  will-change: opacity, transform;
}

/* 卡片可见样式 */
.member-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}
</style>
